<template>
<div @click="gourl" class="container">
  <Echart
        id="rightTop"
        :options="option"
        class="right_top_inner"
        ref="charts"
    />
</div>
  
</template>

<script>
import { currentGET } from "api/modules";
import axios from "axios";
export default {
  data() {
    return {
      option: {}//用于配置Echarts图表的选项
    };
  },

  created() {//是一个生命周期钩子函数

  },

  mounted() {//是一个生命周期钩子函数
    this.getData();//用于获取数据
  },
  methods: {
    gourl() {
      this.$router.push('/index/echart-list'); // 使用路由名跳转
    },
    async getData() {
      try {
        const response = await axios.get('http://localhost:8080/mine-water-inflow/getsGroup');
        console.log('left3查询矿井涌水量的response.data = ', response.data)
        if (response.code === '0') {
        console.log('left3查询矿井涌水量的response.code = ', response.code)
          this.$nextTick(() => {
            this.init(response.data);
          });
        } else {
          this.$message.error('查询矿井涌水量失败');
        }
      } catch (error) {
        this.$message.error('查询矿井涌水量失败');
      }
    },
    init(data) {
      // 提取所有时间点并去重排序
      const allTimes = [];
      Object.values(data).forEach(series => {
        series.forEach(item => {
          if (!allTimes.includes(item.time)) {
            allTimes.push(item.time);
          }
        });
      });
      
      // 对时间进行排序（假设格式是"X月"）
      allTimes.sort((a, b) => {
        const monthA = parseInt(a.replace('月', ''));
        const monthB = parseInt(b.replace('月', ''));
        return monthA - monthB;
      });

      // 准备系列数据
      const series = [];
      const colors = [
        "rgba(236,167,30,0.7)",
        "rgba(30,144,236,0.7)",
        "rgba(30,236,144,0.7)",
        "rgba(144,30,236,0.7)",
        "rgba(236,30,144,0.7)"
      ];
      
      let colorIndex = 0;
      let maxValue = 0;
      
      Object.entries(data).forEach(([name, items]) => {
        // 为每个系列创建数据点，确保与allTimes顺序一致
        const seriesData = allTimes.map(time => {
          const item = items.find(i => i.time === time);
          if (item) {
            const value = parseFloat(item.water_inflow);
            if (value > maxValue) maxValue = value;
            return value;
          }
          return null; // 没有数据的时间点设为null
        });
        
        series.push({
          name: name,
          data: seriesData,
          type: "line",
          symbol: "circle",
          symbolSize: [8, 8],
          color: colors[colorIndex % colors.length],
          // markPoint: {
          //   data: [
          //     {
          //       name: "最大值",
          //       type: "max",
          //       valueDim: "y",
          //       symbol: "circle",
          //       symbolSize: [60, 26],
          //       symbolOffset: [0, -20],
          //       itemStyle: {
          //         color: "rgba(0,0,0,0)",
          //       },
          //       label: {
          //         color: colors[colorIndex % colors.length],
          //         backgroundColor: "rgba(252,144,16,0.1)",
          //         borderRadius: 6,
          //         padding: [7, 14],
          //         borderWidth: 0.5,
          //         borderColor: colors[colorIndex % colors.length],
          //         formatter: function(params) {
          //           return `${name}最高值：${params.value}`;
          //         },
          //       },
          //     },
          //   ],
          // },
        });
        
        colorIndex++;
      });

      this.option = {
        xAxis: {
          type: "category",
          data: allTimes,
          name: "时间",
          boundaryGap: true,
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            interval: 0,
            rotate: 45,
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        yAxis: {
          min: 0,
          max: Math.ceil(maxValue * 1.1),
          type: "value",
          name: "涌水量（m^3/h）",
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(31,99,163,.2)",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(31,99,163,.1)",
            },
          },
          axisLabel: {
            color: "#7EB7FD",
            fontWeight: "500",
          },
        },
        tooltip: {
          trigger: "axis",
          backgroundColor: "rgba(0,0,0,.6)",
          borderColor: "rgba(147, 235, 248, .8)",
          textStyle: {
            color: "#FFF",
          },
        },
        // legend: {
        //   data: Object.keys(data),
        //   textStyle: {
        //     color: "#7EB7FD"
        //   }
        // },
        grid: {
          show: true,
          left: "10px",
          right: "30px",
          bottom: "10px",
          top: "28px",
          containLabel: true,
          borderColor: "#1F63A3",
        },
        series: series
      };
      this.$refs.charts.echartsInstance.setOption(this.option, true); // 更新图表
    },
    // async getData() {
    //   try {
    //     const response = await axios.get('http://localhost:8080/mine-water-inflow/getAll')
    //     console.log('查询矿井涌水量的response.data = ', response.data)
    //     if (response.code === '0') {
    //       this.$nextTick(() => {
    //               // 直接使用res.data作为数据源
    //               const xData = response.data.map(item => item.time);
    //               const yData = response.data.map(item => parseFloat(item.waterInflow));
    //               this.init(xData, yData);
    //             });
              
    //     } else {
    //       // 查询失败
    //       this.$message.success('查询矿井涌水量失败')
    //     }
    //   } catch (error) {
    //     this.$message.success('查询矿井涌水量失败')
    //   }
    // },
    // init(xData, yData) {
    //   this.option = {
    //     xAxis: {
    //       type: "category",
    //       data: xData,
    //       name: "heng",
    //       boundaryGap: true, //
    //       splitLine: {
    //         show: true,
    //         lineStyle: {//分隔线样式设置
    //           color: "rgba(31,99,163,.2)",
    //         },
    //       },
    //       axisLine: {//坐标轴先样式设置
    //         // show:false,
    //         lineStyle: {
    //           color: "rgba(31,99,163,.1)",
    //         },
    //       },
    //       axisLabel: {//坐标轴刻度标签
    //         interval: 0, // 显示所有标签
    //         rotate: 45, // 标签旋转45度
    //         color: "#7EB7FD",
    //         fontWeight: "500",
    //       },
    //     },
    //     yAxis: {
    //       min: 0, // Y轴的最小值
    //       // max: 120 ,// Y轴的最大值
    //       max: Math.ceil(Math.max(...yData) * 1.1),  // 以最大值为基准，稍微增加一些上限
    //       type: "value",
    //       name: "涌水量（m^3/h）",
    //       splitLine: {
    //         show: true,
    //         lineStyle: {
    //           color: "rgba(31,99,163,.2)",
    //         },
    //       },
    //       axisLine: {
    //         lineStyle: {
    //           color: "rgba(31,99,163,.1)",
    //         },
    //       },
    //       axisLabel: {
    //         color: "#7EB7FD",
    //         fontWeight: "500",
    //       },
    //     },
    //     //提示框配置项
    //     tooltip: {
    //       trigger: "axis",
    //       backgroundColor: "rgba(0,0,0,.6)",
    //       borderColor: "rgba(147, 235, 248, .8)",
    //       textStyle: {
    //         color: "#FFF",
    //       },
    //     },
    //     //布局
    //     grid: {
    //       show: true,
    //       left: "10px",
    //       right: "30px",
    //       bottom: "10px",
    //       top: "28px",
    //       containLabel: true,
    //       borderColor: "#1F63A3",
    //     },
    //     series: [
    //       {
    //         data: yData,
    //         type: "line",
    //         symbol: "circle",
    //         symbolSize: [8, 8],
    //         name: "涌水量（m^3/h）",
    //         color: "rgba(236,167,30,0.7)",
    //         markPoint: {
    //           data: [
    //             {
    //               name: "最大值",
    //               type: "max",
    //               valueDim: "y",
    //               symbol: "circle",//rect表示矩形 circle表示圆形
    //               symbolSize: [60, 26],
    //               symbolOffset: [0, -20],
    //               itemStyle: {
    //                 color: "rgba(0,0,0,0)",
    //               },
    //               label: {
    //                 color: "#FC9010",
    //                 backgroundColor: "rgba(252,144,16,0.1)",
    //                 borderRadius: 6,
    //                 padding: [7, 14],
    //                 borderWidth: 0.5,
    //                 borderColor: "rgba(252,144,16,.5)",
    //                 formatter: "最高值：{c}",
    //               },
    //             },
    //           ],
    //         },
    //       },
    //     ],
    //   };
    //   this.$refs.charts.echartsInstance.setOption(this.option, true); // 更新图表
    // },
  },
};
</script>
<style lang='scss' scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1px;
  width: 350px; /* 调整图表容器的宽度 */
  height: 260px; /* 调整图表容器的高度 */
  border-radius: 5px;
  overflow: hidden;
}
.right_top_inner {
  width: 100%;
  height: 100%;

}
</style>
